<script setup lang="ts">
import type { ArticleInfo } from '@/types/article.ts';
import { useRoute } from 'vue-router';

const route = useRoute();

defineProps<{
  articleInfo: ArticleInfo;
}>();
</script>

<template>
  <!-- 版权声明 -->
  <div class="article-declaration" :class="articleInfo.source === 0 ? 'original' : 'reprint'">
    <h3>
      <span class="icon">{{ articleInfo.source === 0 ? '©' : '🔄' }}</span>
      {{ articleInfo.source === 0 ? '版权声明' : '转载声明' }}
    </h3>
    <ul>
      <!-- 原创文章声明 -->
      <template v-if="articleInfo.source === 0">
        <li>
          <span class="label">文章作者：</span>
          <span class="value">{{ articleInfo.author }}</span>
        </li>
        <li>
          <span class="label">文章链接：</span>
          <a class="value" :href="'https://www.starmist.net' + route.fullPath">
            https://www.starmist.net{{ route.fullPath }}
          </a>
        </li>
        <li>
          <span class="label">版权声明：</span>
          <span class="value">本博客所有文章除特别声明外，均采用
                <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">
                  CC BY-NC-SA 4.0
                </a>
                许可协议。转载请注明来源！
              </span>
        </li>
      </template>

      <!-- 转载文章声明 -->
      <template v-else>
        <li>
          <span class="label">原文作者：</span>
          <span class="value">{{ articleInfo.author }}</span>
        </li>
        <li>
          <span class="label">原文链接：</span>
          <a class="value" :href="articleInfo.externalLink">
            {{ articleInfo.externalLink }}
          </a>
        </li>
        <li>
          <span class="label">文章来源：</span>
          <span class="value">{{ articleInfo.sourceAddress }}</span>
        </li>
        <li>
          <span class="label">转载声明：</span>
          <span class="value">本文转载自{{ articleInfo.sourceAddress }}，转载目的在于传递更多信息。如有侵权请联系站长删除。</span>
        </li>
      </template>
    </ul>
  </div>
</template>

<style scoped lang="less">
// 文章声明样式
.article-declaration {
  padding: 24px;
  border-radius: 8px;

  h3 {
    margin: 0 0 16px;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    gap: 8px;

    .icon {
      font-size: 1.2em;
    }
  }

  // 列表样式
  ul, ol {
    padding-left: 2em;
    margin: 16px 0;

    li {
      position: relative;
      padding: 8px 0;
      color: #374151;
      font-size: 1rem;
      line-height: 1.6;
      border-bottom: 1px dashed #e5e7eb;
      transition: all 0.3s ease;

      &:last-child {
        border-bottom: none;
      }

      &:hover {
        padding-left: 8px;
        color: #60a5fa;
      }
    }
  }

  // 无序列表项前的点
  ul li {
    &::before {
      content: "";
      position: absolute;
      left: -1.5em;
      top: 50%;
      transform: translateY(-50%);
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #60a5fa;
    }
  }

  // 原创文章样式
  &.original {
    background-color: #f8f9fa;
    border-left: 4px solid #60a5fa;

    h3 {
      color: #2c3e50;
      .icon {
        color: #60a5fa;
      }
    }

    // 原创文章链接样式
    a {
      color: #60a5fa;
      border-bottom: 1px dashed #60a5fa;

      &:hover {
        color: #2563eb;
        border-bottom-style: solid;
      }
    }
  }

  // 转载文章样式
  &.reprint {
    background-color: #fff8f1;
    border-left: 4px solid #f97316;

    h3 {
      color: #9a3412;
      .icon {
        color: #f97316;
      }
    }

    ul li {
      &:hover {
        color: #f97316;
      }

      &::before {
        background-color: #f97316;
      }
    }

    // 转载文章链接样式
    a {
      color: #f97316;
      border-bottom: 1px dashed #f97316;

      &:hover {
        color: #ea580c;
        border-bottom-style: solid;
      }
    }
  }
}
</style>
